<template>
  <div>
    <table border="1">
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <tr>
        <td>苹果10￥/斤，折扣《8折》</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="text" v-model="a" /></td>
      </tr>
      <tr>
        <td><button @click="btn(a)">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结帐单：总价<span>{{ msg }}</span
          >￥元 折后价：<span>{{ msg1 }}</span
          >￥元 省了：<span>{{ msg2 }}</span
          >￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 0,
      msg1: 0,
      msg2: 0,
    };
  },
  methods: {
    btn(unm) {
      this.msg = unm * 10;
      this.msg1 = this.msg - 2 * unm;
      this.msg2 = this.msg - this.msg1;
    },
  },
};
</script>

<style>
div {
  margin: 100px auto;
  width: 500px;
  height: 500px;
}
table {
  width: 500px;
}
td {
  text-align: center;
}
</style>
